<template>
  <div class="home">
    <div class="update" @click="update">更新违章信息</div>
    <div class="item"  v-for="o in obj">
      <Card :bordered="false">
        <p slot="title">
          <span class="th">{{o.car_no}}
            <label v-if="o.up_time">更新时间 {{o.up_time | timeFilter}}</label>
            <label v-else="o.up_time">更新时间 {{o.create_time | timeFilter}}</label>
          </span>
          <img class="img" src="../assets/image/car.png"/>
          <span class="del" @click="del(o.id)">X</span>
        </p>
        <p>
          <span class="undeal">
             {{o.viCount}}
             <label>未处理违章</label>
          </span>
          <span class="amount">
              {{o.fineFee}}
             <label>罚款</label>
          </span>

          <span class="btn" @click="inquiryList(o.car_no)">查看</span>
        </p>
      </Card>
    </div>
    <div class="bline"></div>
    <loading v-show="loading" class="loading"></loading>
    <div class="add" v-show="!loading" @click="addInquiry">
      <Card :bordered="false">
         <span class="btn1">
            <button>+</button>
         </span>
        <label>添加车辆查询</label>
        <span class="desc">立享在线违章查询办理</span>
      </Card>
    </div>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
  import * as API from '../assets/js/API.js'
  import Loading from '../components/Loading.vue'
  export default {
    components: {
      Loading
    },
    data () {
      return {
        access_token: this.$route.params.accessToken,
        openid: this.$route.params.openid,
        obj: {},
        ifModal: true,
        loading: true,
        spinShow: false
      }
    },
    created () {
      this.carList()
      window.localStorage.setItem('accessToken', this.access_token)
      window.localStorage.setItem('openid', this.openid)
    },
    methods: {
      navTo (link) {
        this.$router.push({path: link})
      },
      addInquiry () {
        this.navTo('/addInquiry')
      },
      inquiryList (v) {
        this.navTo('/inquiryList/' + v)
      },
      // 车主违章车辆列表
      carList () {
        let param = {
          openid: this.openid
        }
        this.$http.post(API.Index, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            this.loading = false
            let msg = resp.body.msg
            let data = resp.body.data
            if (msg === 'OK') {
              this.obj = data.vcs
            } else {
              this.$Message.info(msg)
            }
          }
        )
      },
      // 更新违章信息
      update () {
        this.spinShow = true
        let param = {
          openId: this.openid
        }
        this.$http.post(API.UpdateIllegalinfo, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            let code = resp.body.code
            let msg = resp.body.msg
            if (code === 200) {
              this.$Message.info('更新成功')
              this.spinShow = false
              this.carList()
            } else {
              this.$Message.info(msg)
            }
          }
        )
      },
      // 删除违章车辆确认
      del (id) {
        this.$Modal.confirm({
          // title: '删除',
          content: '<p style="text-align:left;font-size:20px">确认要删除此车辆?</p>',
          onOk: () => {
            this.delConfirm(id)
          },
          onCancel: () => {
          }
        })
      },
      // 删除违章车辆
      delConfirm (id) {
        let param = {
          id: id
        }
        this.$http.post(API.DeleteViolationsVehicle, {access_token: this.access_token, param: JSON.stringify(param)}).then(
          (resp) => {
            let code = resp.body.code
            let msg = resp.body.msg
            if (code === 200) {
              this.$Message.info('删除成功')
              this.carList()
            } else {
              this.$Message.info(msg)
            }
          }
        )
      }
    },
    filters: {
      timeFilter (v) {
        if (!v) return
        var now = new Date()
        now.setTime(v)
        let y = now.getFullYear()
        let m = now.getMonth() + 1
        let d = now.getDate()
        return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
      }
    }
  }
</script>
<style lang="scss">
  @import '../assets/style/common.scss';
  .home {
    padding: px2rem(10px) px2rem(20px) px2rem(20px);
    box-sizing: border-box;
    .update {
      width: 100%;
      height: px2rem(80px);
      line-height: px2rem(80px);
      text-align: center;
      color: #fff;
      font-size: px2rem(30px);
      border-radius: px2rem(5px);
      background-color: #35b41c;
    }
    .item {
      padding: px2rem(10px) 0;
      > .ivu-card {
        width: 100%;
        height: px2rem(260px);
        background-color: #fff;
        border: 1px solid #e9eaec;
        box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        .undeal,.amount{
          font-size: px2rem(24px);
        }
        .th {
          float: left;
          width: 50%;
          display: block;
          font-size: px2rem(35px);
          text-transform : uppercase;
          > label {
            display: block;
            font-size: px2rem(20px);
            color: silver;
            font-weight: 400;
            margin-top: px2rem(8px);
          }
        }
        .img {
          display: block;
          float: right;
          width: px2rem(120px);
          height:auto;
          margin-right: px2rem(80px);
          background-size: contain;
        }
      }
      .del {
        position: absolute;
        top: px2rem(20px);
        right: px2rem(20px);
        /*width: px2rem(30px);*/
        /*height: px2rem(30px);*/
        /*border: 1px solid silver;*/
        font-size: px2rem(40px);
        width: px2rem(30px);
        font-weight: lighter;
        color: silver;
      }
    }
    .add {
      width: 100%;
      /*height: px2rem(250px);*/
      box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
      -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
      font-size: px2rem(24px);
      .ivu-card {
        height: px2rem(250px);
      }
      .ivu-card-body {
        line-height: px2rem(70px);
      }
      label {
        display: block;
        line-height: px2rem(40px);
      }
      .btn1 {
        width: 100%;
        display: block;
        text-align: center;
        border-radius: px2rem(20px);
        padding: px2rem(20px) 0;
        button {
          width: px2rem(80px);
          height: px2rem(80px);
          border-radius: px2rem(80px);
          border: none;
          outline: none;
          color: #fff;
          font-size: px2rem(60px);
          /*border: 1px solid #35b41c;*/
          background-color: #35b41c;
          box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
          -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        }
      }
      .desc {
        /*font-size: px2rem(10px);*/
      }
    }
    .bline{
      height: px2rem(10px);
      width: 100%;
    }
    .ivu-card-head p {
      display: block;
      height: px2rem(70px);
      width: 100%;
    }
    .ivu-card-head {
      border: none;
      &::after {
        position: relative;
        display: block;
        content: "";
        width: 100%;
        border-bottom: 1px dashed silver;
        margin-top: px2rem(30px);
      }
    }
    .ivu-card-body {
      padding: 0 px2rem(20px);
      text-align: center;
      font-size: px2rem(24px);
      .undeal {
        display: block;
        width: px2rem(180px);
        height: px2rem(80px);
        float: left;
        border-right: 1px solid #eee;
        > label {
          display: block;
        }
      }
      .amount {
        display: block;
        width: px2rem(150px);
        height: px2rem(80px);
        float: left;
        > label {
          display: block;
        }
      }
      .btn{
        float: right;
        display: block;
        width: px2rem(80px);
        height: px2rem(80px);
        line-height: px2rem(80px);
        text-align: center;
        background-color: #35b41c;
        border-radius: px2rem(130px);
        color: #fff;
        margin-right: px2rem(15px);
        box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
      }
    }
  }
</style>
